<template>
	<view>

		<view class="bg_box">
			<image class="bg01" :src="'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/' + 'bg05.png'"
				mode="widthFix"></image>
			<view class="bg_content">

				<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
					<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
					<view class="text">预约订单</view>
				</view>

				<!-- <view class="nav" :class="scrrol == true ? 'scrrolHeader' : ''">
					<view class="navauto">
						<block v-for="(item, index) in menu" :key="index">
							<view class="menu" :data-index="index" @tap="setNavMenu">
								<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}</view>
								<view class="line" :class="index == select ? 'menucolor02' : ''">
									<image :src="Cfg.Setting.img + 'xiao.png'" mode="widthFix"></image>
								</view>
							</view>
						</block>
					</view>
				</view>	 -->
				<view class="clear_box"></view>


				<!-- 预约服务订单列表 -->
				<block v-for="(item, index) in list" :key="index">
					<view class="order_list"
						:data-url="'/pages/order/servicedetails?id='+item.id+'&state='+item.order_status"
						@click="gotopage">
						<view class="service_box">
							<view class="label02" v-if="item.is_next == 1">预约</view>
							<view class="label label_color02" v-if="item.service_id == 4">废品下楼</view>
							<view class="label label_color04" v-if="item.service_id == 6">代寄快递</view>
							<view class="label label_color01" v-if="item.service_id == 3">快递上楼</view>
							<view class="service" v-if="!item.receipt_time">
								<view class="text" v-if="item.is_next != 1">预计</view>
								<view class="text" v-if="item.is_next == 1">预约</view>
								<view class="time">{{ item.estimate_time }}</view>
								<view class="text">送达</view>
							</view>
							<view class="service" v-if="item.receipt_time">
								<view class="time">{{ item.receipt_time }}</view>
								<view class="text">完成</view>
							</view>
							<!-- <view class="service">
							<view class="money">{{ item.price }}</view>
							<view class="text">元</view>
						</view> -->
						</view>
						<view class="content">
							<view class="other" v-if="item.f_address != 1">
								<view class="icon">
									<image :src="Cfg.Setting.img + 'delivery01.png'" mode="widthFix"></image>
								</view>
								<view class="text">{{item.fetch_area}}{{item.fetch_address}}</view>
							</view>
							<block v-for="(item02, index02) in item.fetch_address" v-if="item.f_address == 1">
								<view class="other">
									<view class="icon">
										<image :src="Cfg.Setting.img + 'delivery01.png'" mode="widthFix"></image>
									</view>
									<view class="text">{{item02.fetch_address}}</view>
								</view>
							</block>
							<view class="other">
								<!-- <view class="distance">1000km</view> -->
							</view>
							<view class="other">
								<view class="line"></view>
							</view>
							<view class="other">
								<view class="icon">
									<image :src="Cfg.Setting.img + 'delivery02.png'" mode="widthFix"></image>
								</view>
								<view class="text">{{item.receive_area}}{{item.receive_address}}</view>
							</view>
							<view class="other">
								<view class="remarks02">姓名:{{ item.fetch_name }}({{item.fetch_tel | filterPhoneNumber}})
								</view>
							</view>
							<view class="other">
								<view class="remarks">备注:{{ item.remark }}</view>
							</view>
						</view>
						<view class="order_menu">
							<view class="menu menu02" v-if="type != 2" :data-phone="item.fetch_tel"
								@tap.stop="sceltaContatto">联系客户
							</view>
							<view class="menu menu02" v-if="type == 7" :data-latitude="item.receive_lat[1]"
								:data-longitude="item.receive_lat[0]" @tap.stop="goLocation">导航</view>
							<view class="menu menu02" v-if="type == 3" :data-latitude="item.fetch_lat[1]"
								:data-longitude="item.fetch_lat[0]" @tap.stop="goLocation">导航</view>
							<view class="menu" v-if="type == 2" :data-id="item.id" @tap.stop="jionOrders">立即接单</view>
							<view class="menu" v-if="type == 3&&item.service_id != 3" @click.stop="vipStatusGo"
								data-vstatus="7" :data-vid="item.id">已取货
							</view>
							<!-- <view class="menu" v-if="type == 3" :data-id="item.id" @tap="goPick">已取货</view> -->
							<view class="menu" v-if="type == 7 && item.express_status == 2">等待支付运费</view>
							<view class="menu" v-if="type == 7 && item.express_status == 0&&item.service_id == 6"
								@click.stop="vipStatusGo02" data-vstatus="6" :data-vid="item.id">已完成</view>
							<view class="menu" v-if="type == 7 && item.express_status == 0&&item.service_id == 3"
								@click.stop="vipStatusGo03" data-vstatus="6" :data-vid="item.id" :data-many="item.is_many">已完成</view>
							<view class="menu" v-if="type == 7 && item.express_status == 0&&item.service_id == 4"
								:data-id="item.id" @tap.stop="goComplete">已完成</view>
						</view>
					</view>
				</block>


			</view>
		</view>

		<!-- 取到货上传图片 -->
		<view class="pupu_box" v-if="pupu" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<view class="title">物品图片</view>
				<view class="img_box">
					<view class="img" @tap="getImg">
						<image :src="addImg" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="menu" @tap="determinePupu">确定</view>
			</view>
		</view>

		<!-- 代寄快递上传小票和金额 -->
		<view class="pupu_box" v-if="pupu02" @tap="autoPupu02">
			<view class="show_box" @tap.stop="">
				<view class="title">小票图片和运费</view>
				<view class="img_box">
					<view class="img" @tap="getImg02">
						<image :src="addImg02" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="input">
					<view class="m"></view>
					<input type="text" value="" placeholder="请输入快递单号" v-model="buyNumber" />
				</view>
				<view class="input">
					<view class="m"></view>
					<input type="text" value="" placeholder="请输入快递公司" v-model="buyCorporation" />
				</view>
				<view class="input">
					<view class="m">￥</view>
					<input type="number" value="" placeholder="请输入快递费用" v-model="express_money" />
				</view>
				<view class="menu" @tap="determinePupu02">确定</view>
			</view>
		</view>


		<!-- 快递送达图片 -->
		<view class="pupu_box" v-if="pupu03" @tap="autoPupu03">
			<view class="show_box" @tap.stop="">
				<view class="title">快递送达图片</view>
				<view class="input" v-if="isMany == 1">
					<!-- <view class="m">(必填)</view> -->
					<input type="number" value="" placeholder="请输入包裹数量" v-model="parcelNum" />
				</view>
				<view class="img_box">
					<view class="img" @tap="getImg03">
						<image :src="addImg03" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="menu" @tap="determinePupu03">确定</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				pupu: false,
				pupu02: false,
				pupu03: false,
				pupuStatus: '',
				pupuid: '',
				addImg: 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png',
				addImg02: 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png',
				addImg03: 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png',
				scrrol: false,
				info: '',
				page: 1,
				type: '',
				goodsid: '',
				selectime: '',
				list: [],
				select: 0,
				menu: [{
						text: '待取货'
					},
					{
						text: '配送中'
					},
				],
				express_money: '',
				serviceId: '',
				buyNumber: '',
				buyCorporation: '',
				isMany:0,
				parcelNum:'',
			}
		},
		filters: {
			filterPhoneNumber(phoneNumber) {
				let reg = /^1[3456789]{1}\d{9}$/; //必须是以1开头，第二位必须是3-9中的任意一个数，后面9位必须是数字
				//校验手机号是否正确
				if (reg.test(phoneNumber)) {
					phoneNumber = phoneNumber.toString(); //先强制转换成字符串类型
					return phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
				} else {
					return '';
				}
			}
		},
		onLoad(e) {
			let that = this;
			that.goodsid = e.id;
			that.selectime = e.time;
			that.type = e.type;
			that.serviceId = e.sid;
		},
		onShow() {
			let that = this;
			that.page = 1;
			that.loadData();

		},
		methods: {
			determinePupu() {
				let that = this;
				if (that.addImg == 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png') {
					that.Msg.Fail('请上传物品图片');
					return;
				}


				that.Net._put('user/vip/edit_order/' + that.pupuid, {
					order_status: that.pupuStatus,
					finish_image: that.addImg
				}, res => {
					if (res.code == 200) {
						that.Msg.Success('操作成功', res => {
							that.page = 1;
							that.serviceCode = '';
							that.addImg =
								'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png';
							that.pupu = false;
							that.loadData();
						});
					} else if (res.code != 200) {
						that.Msg.Success(res.msg, res => {});
					}
				});
			},
			determinePupu02() {
				let that = this;
				if (that.addImg02 == 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png') {
					that.Msg.Fail('请上传小票图片');
					return;
				}

				if (!that.buyNumber) {
					that.Msg.Fail('请输入快递单号');
					return;
				}

				if (!that.buyCorporation) {
					that.Msg.Fail('请输入快递公司');
					return;
				}

				if (!that.express_money) {
					that.Msg.Fail('请输入快递费用');
					return;
				}


				that.Net._put('user/vip/edit_order/' + that.pupuid, {
					order_status: that.pupuStatus,
					express_image: that.addImg02,
					express_fee: that.express_money,
					logistics_no:that.buyNumber,
					logistics_name:that.buyCorporation,
				}, res => {
					if (res.code == 200) {
						that.Msg.Success('操作成功', res => {
							that.page = 1;
							that.serviceCode = '';
							that.addImg02 =
								'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png';
							that.pupu02 = false;
							that.loadData();
						});
					} else if (res.code != 200) {
						that.Msg.Success(res.msg, res => {});
					}
				});
			},
			determinePupu03() {
				let that = this;
				
				if(that.isMany == 1){
					if (!that.parcelNum) {
						that.Msg.Fail('请输入包裹数量');
						return;
					}
				}
				
				if (that.addImg03 == 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png') {
					that.Msg.Fail('请上传快递送达图片');
					return;
				}

				that.Net._put('user/vip/edit_order/' + that.pupuid, {
					order_status: that.pupuStatus,
					express_image: that.addImg03,
					actual_package: that.parcelNum,
				}, res => {
					if (res.code == 200) {
						that.Msg.Success('操作成功', res => {
							that.page = 1;
							that.serviceCode = '';
							that.addImg03 =
								'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png';
							that.pupu03 = false;
							that.loadData();
						});
					} else if (res.code != 200) {
						that.Msg.Success(res.msg, res => {});
					}
				});
			},
			getImg() {
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; //图片选择完成后 获取该图片的路劲
						uni.compressImage({
							src: temFilePath[0],
							quality: 30,
							success: res => {
								console.log(res.tempFilePath)
								uni.uploadFile({
									url: that.Cfg.Setting.root +
									'uploads', //上传文件的Controller
									filePath: temFilePath[0], //要上传的文件路径
									name: 'file',
									success: res => {
										//console.log(JSON.parse(res.data))
										let imgData = JSON.parse(res.data);
										that.addImg = imgData.data.data;
									}
								});
							}
						})

					}
				});
			},
			getImg02() {
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; //图片选择完成后 获取该图片的路劲
						uni.compressImage({
							src: temFilePath[0],
							quality: 30,
							success: res => {
								console.log(res.tempFilePath)
								uni.uploadFile({
									url: that.Cfg.Setting.root +
									'uploads', //上传文件的Controller
									filePath: temFilePath[0], //要上传的文件路径
									name: 'file',
									success: res => {
										//console.log(JSON.parse(res.data))
										let imgData = JSON.parse(res.data);
										that.addImg02 = imgData.data.data;
									}
								});
							}
						})

					}
				});
			},
			getImg03() {
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; //图片选择完成后 获取该图片的路劲
						uni.compressImage({
							src: temFilePath[0],
							quality: 30,
							success: res => {
								//console.log(res.tempFilePath)
								uni.uploadFile({
									url: that.Cfg.Setting.root +
									'uploads', //上传文件的Controller
									filePath: temFilePath[0], //要上传的文件路径
									name: 'file',
									success: res => {
										//console.log(JSON.parse(res.data))
										let imgData = JSON.parse(res.data);
										that.addImg03 = imgData.data.data;
									}
								});
							}
						})

					}
				});
			},
			vipStatusGo(e) {
				let that = this;
				that.pupuStatus = e.currentTarget.dataset.vstatus;
				that.pupuid = e.currentTarget.dataset.vid;
				that.pupu = !that.pupu;
			},
			vipStatusGo02(e) {
				let that = this;
				that.pupuStatus = e.currentTarget.dataset.vstatus;
				that.pupuid = e.currentTarget.dataset.vid;
				that.pupu02 = !that.pupu02;
			},
			vipStatusGo03(e) {
				let that = this;
				that.pupuStatus = e.currentTarget.dataset.vstatus;
				that.pupuid = e.currentTarget.dataset.vid;
				that.isMany = e.currentTarget.dataset.many;
				that.pupu03 = !that.pupu03;
			},
			autoPupu() {
				let that = this;
				that.pupu = !that.pupu;
			},
			autoPupu02() {
				let that = this;
				that.pupu02 = !that.pupu02;
			},
			autoPupu03() {
				let that = this;
				that.pupu03 = !that.pupu03;
			},
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				if (that.select == 0) {
					that.type = 3;
				} else if (that.select == 1) {
					that.type = 7;
				}

				that.page = 1;

				that.list = [];
				that.loadData();




			},
			loadData() {
				let that = this;
				that.Net._get('terminal/building_service_order', {
					per_page: '10',
					page: that.page,
					building_id: that.goodsid,
					pick_time: that.selectime,
					type: '1',
					order_status: that.type,
					service_id: that.serviceId
				}, res => {
					if (res.code == 200) {
						//console.log(res)
						that.list = res.data.data;
					}
				});
			},
			sceltaContatto(e) {
				//联系
				var that = this;
				let phone_ = e.currentTarget.dataset.phone;
				console.log(e)
				uni.showActionSheet({
					itemList: ['电话'],
					success: function(res) {
						//console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						console.log(res.tapIndex);
						uni.makePhoneCall({
							phoneNumber: phone_ //仅为示例
						});
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			goLocation(e) {
				let latitude = e.currentTarget.dataset.latitude;
				let longitude = e.currentTarget.dataset.longitude;
				// console.log(latitude);
				// console.log(longitude);
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: function() {
						console.log('success');
					}
				});
			},
			jionOrders(e) {
				let that = this;
				let id_ = e.currentTarget.dataset.id;
				uni.showModal({
					title: '提示',
					content: '是否接取订单?',
					success: function(res) {
						if (res.confirm) {
							//console.log('用户点击确定');
							that.Net._post('terminal/terminal_order_status', {
								order_id: id_,
								order_status: '3'
							}, res => {
								if (res.code == 200) {
									//console.log(res)
									that.Msg.Success('接单成功', res => {
										that.page = 1;
										that.loadData();
									});
								}

							});
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});

			},
			goComplete(e) {
				let that = this;
				let id_ = e.currentTarget.dataset.id;
				uni.showModal({
					title: '提示',
					content: '是否确认完成订单?',
					success: function(res) {
						if (res.confirm) {
							//console.log('用户点击确定');
							that.Net._post('terminal/terminal_order_status', {
								order_id: id_,
								order_status: '6'
							}, res => {
								if (res.code == 200) {
									//console.log(res)
									that.Msg.Success('订单完成', res => {
										that.page = 1;
										that.loadData();
									});
								}

							});
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			let that = this;
			that.page = 1;
			that.list = [];
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.loadData();
			}, 500);
		},
		onReachBottom() {
			var that = this;
			that.page++;
			that.Net._get('terminal/building_service_order', {
				per_page: '10',
				page: that.page,
				building_id: that.goodsid,
				pick_time: that.selectime,
				type: '1',
				order_status: that.type,
				service_id: that.serviceId
			}, res => {
				if (res.code == 200) {
					//console.log(res)
					if (res.data.data == '') {
						uni.showToast({
							title: '已经是最后一页了',
							duration: 2000,
							icon: 'none'
						});
					} else {
						that.list = that.list.concat(res.data.data); //将数据拼接在一起
					}
				} else if (res.code == 0) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
	}
</script>

<style>
	.scrrolHeader {
		background-color: #fef2e6 !important;
	}

	.header {
		background-color: transparent;
	}

	.header .text {
		background-color: transparent;
	}

	.clear_box07 {
		height: calc(27vw + var(--status-bar-height)) !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
		display: block;
	}

	.bg_box .bg_content {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999;
		padding-bottom: 15vw;
	}

	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13vw + var(--status-bar-height));
		z-index: 99;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}

	.nav .navauto {
		width: fit-content;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}

	.nav .navauto .menu {
		width: 50%;
		position: relative;
	}

	.nav .navauto .menu02 {
		width: 30vw;
	}

	.nav .navauto .menu .text {
		font-size: 4vw;
		color: #333;
		text-align: center;
		line-height: 13.5vw;
	}

	.nav .navauto .menu .line {
		width: 10%;
		border-radius: 3vw;
		position: absolute;
		left: calc(50% - 5%);
		bottom: 0vw;
		display: none;
	}

	.nav .navauto .menu .line image {
		width: 100%;
	}

	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.5vw !important;
	}

	.menucolor02 {
		display: block !important;
	}

	.menucolor03 {
		background-color: #FF9822 !important;
	}

	.order_list {
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 2vw;
		padding: 3vw;
		box-sizing: border-box;
		margin-top: 4%;
	}

	.order_list .service_box {
		width: 100%;
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}

	.order_list .service_box .label {
		padding: 1vw 2vw;
		font-size: 3vw;
		color: #fff;
		border-radius: 8vw 8vw 8vw 2vw;
		margin-right: 1vw;
	}

	.order_list .service_box .label02 {
		width: 7vw;
		height: 7vw;
		line-height: 7vw;
		text-align: center;
		border-radius: 50%;
		font-size: 2.8vw;
		color: #fff;
		background-color: #FF9822;
		margin-right: 1vw;
	}



	.order_list .service_box .label_color01 {
		background-color: #0088FE;
	}

	.order_list .service_box .label_color02 {
		background-color: #06D2AD;
	}

	.order_list .service_box .label_color03 {
		background-color: #FFA322;
	}

	.order_list .service_box .label_color04 {
		background-color: #FF4971;
	}

	.order_list .service_box .label_color05 {
		background-color: #905BF1;
	}

	.order_list .service_box .service {
		display: flex;
		align-items: center;
	}

	.order_list .service_box .service:nth-child(6) {
		flex: 1;
		justify-content: flex-end;
	}

	.order_list .service_box .service02 {
		flex: 1;
		justify-content: flex-end;
	}

	.order_list .service_box .service .time {
		font-size: 3.5vw;
		color: #FD3633;
		margin-right: 0.5vw;
	}

	.order_list .service_box .service .text {
		font-size: 3.5vw;
		color: #666666;
	}

	.order_list .service_box .service .money {
		font-size: 3.6vw;
		color: #FD3633;
		font-weight: bold;
		margin-right: 0.5vw;
	}

	.order_list .service_box .service .type {
		font-size: 3.5vw;
		color: #FF9822;
	}

	.order_list .content {
		width: 100%;
		margin-top: 3vw;
	}

	.order_list .content .other {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 0.8vw;
	}

	.order_list .content .other .icon {
		width: 10vw;
		margin-right: 2vw;
	}

	.order_list .content .other .icon image {
		width: 100%;
		display: block;
	}

	.order_list .content .other .text {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.order_list .content .other .distance {
		font-size: 2.8vw;
		color: #999999;
	}

	.order_list .content .other .line {
		width: 1px;
		height: 3vw;
		background-color: #DDDDDD;
		margin-left: calc(5vw - 0.5px);

	}

	.order_list .content .other .remarks {
		font-size: 3.2vw;
		color: #999999;
	}

	.order_list .order_menu {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 2vw;
	}

	.order_list .order_menu .menu {
		flex: 1;
		margin-left: 2%;
		background-color: #FF9822;
		border-radius: 2vw;
		text-align: center;
		line-height: 12vw;
		font-size: 3.5vw;
		color: #fff;
	}

	.order_list .order_menu .menu02 {
		background-color: transparent;
		border: 1px solid #DDDDDD;
		box-sizing: border-box;
		color: #333;
	}

	.order_list .order_menu .menu:nth-child(1) {
		margin-left: 0;
	}

	.scrrolHeader {
		background-color: #FF9822;
		transition: 0.5s;
	}

	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pupu_box .show_box {
		width: 58%;
		background-color: #fff;
		border-radius: 4vw;
		padding: 5vw 10vw;
		position: relative;
	}

	.pupu_box .show_box .title {
		width: 100%;
		text-align: center;
		margin: 3vw 0;
		font-size: 4.5vw;
		color: #333;
		font-weight: bold;
	}

	.pupu_box .show_box .input {
		width: 100%;
		height: 13vw;
		border: 1px solid #f5f5f5;
		border-radius: 2vw;
		padding-left: 3vw;
		margin-top: 3vw;
		display: flex;
		align-items: center;
	}

	.pupu_box .show_box .input .m {
		font-size: 3.5vw;
		font-weight: bold;
		margin-right: 1vw;
	}

	.pupu_box .show_box .input input {
		flex: 1;
		height: 13vw;
		line-height: 13vw;
		font-size: 3.5vw;
		color: #333;
	}

	.pupu_box .show_box .menu {
		width: 100%;
		height: 12vw;
		border-radius: 2vw;
		text-align: center;
		line-height: 12vw;
		background-color: #ff7f22;
		color: #fff;
		margin-top: 2vw;
	}

	.pupu_box02 {
		width: 100%;
		height: 100%;
		background-color: transparent;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 98;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pupu_box02 .show_box {
		width: 58%;
		background-color: #fff;
		border-radius: 4vw;
		padding: 5vw 10vw;
		position: relative;
		box-shadow: 1px 0px 4.8px 0.2px rgba(51, 51, 51, 0.10);
	}

	.pupu_box02 .show_box .textValue {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
		text-align: center;
	}

	.pupu_box02 .show_box .menu {
		width: 100%;
		height: 12vw;
		border-radius: 2vw;
		text-align: center;
		line-height: 12vw;
		background-color: #ff7f22;
		color: #fff;
		margin-top: 2vw;
	}

	.img_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		background-color: #fff;
	}

	.img_box::after {
		flex: auto;
		content: '';
	}

	.img_box .img {
		width: 100%;
		height: 35vw;
		border: 1px solid #e8e8e8;
		border-radius: 2vw;
		flex-basis: auto;
		position: relative;
		margin-top: 2vw;
	}

	.img_box .img .xx {
		font-size: 6vw;
		color: #e55557;
		width: 9vw;
		height: 9vw;
		text-align: right;
		position: absolute;
		right: 0;
		top: 0;
	}

	.img_box .img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}

	.img_box .addimg {
		width: 28vw;
		height: 28vw;
		border: 1px solid #e8e8e8;
		border-radius: 2vw;
		flex-basis: auto;
		margin-top: 4vw;
		margin-left: 4vw;
		font-size: 15vw;
		line-height: 28vw;
		text-align: center;
		color: #cecece;
	}
</style>